<script>
export default {
  name: 'FlexTable',
  inheritAttrs: false,
  props: {
    columns: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ref() {
      return this.$refs.table
    }
  },

  methods: {
    clearSelection() {
      this.$refs.table.clearSelection()
    },
    toggleRowSelection(row, selected) {
      this.$refs.table.toggleRowSelection(row, selected)
    }
  },
  render() {
    const tableOptions = {
      ref: 'table',
      props: this.$attrs,
      on: this.$listeners
    }

    const columns = this.columns.map(option => {
      const { customRender, subColumns, ...props } = option
      const colOptions = {
        props: {
          ...props,
          headerAlign: props.headerAlign || 'center',
          align: props.align || 'center',
          showOverflowTooltip: typeof props.showOverflowTooltip !== 'undefined' ? props.showOverflowTooltip : true
        },
        scopedSlots: {}
      }

      if (typeof customRender === 'function') {
        colOptions.scopedSlots.default = scope => customRender(scope)
      }

      if (subColumns) {
        return <el-table-column {...colOptions }>{subColumns()}</el-table-column>
      }

      return props.notShow != 1 && <el-table-column {...colOptions }/>
    })

    return <el-table {...tableOptions}>{columns}</el-table>
  }
}
</script>
